<template>
<div>
  <div v-if="jurisdiction>10">
    <el-button @click="addNews" type="primary" class="addNews">添加</el-button>
    <el-card v-if="!showAddNew">
      <el-button type="success " size="small" round @click="getNewsList(navItem.cs_id)" class="navBtn"  v-for="(navItem,index) in navList">{{navItem.channel}}</el-button>
      <el-table :data="newsList" border style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="time" label="创建时间" width="230"></el-table-column>
        <el-table-column  prop="src"  width="150" label="数据来源"></el-table-column>
        <el-table-column  prop="title" label="新闻标题"></el-table-column>
        <el-table-column   label="封面" width="250">
          <template slot-scope="{ row, $index }">
            <img :src="row.pic" alt="" style="width: 80px; height: 60px" />
          </template>
        </el-table-column>
        <el-table-column  width="220"  label="操作">
          <template slot-scope="{ row, $index }">
            <el-button type="warning" size="mini" icon="el-icon-edit" @click="editNew(row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-edit" @click="deleteNew(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改新闻的弹窗 -->
    <el-dialog title="修改新闻" :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="新闻标题">
        <el-input v-model="row.title"></el-input>
      </el-form-item>
      <!-- 分类 -->
      <el-form-item label="选择分类">
        <el-select  placeholder="请选择要修改的分类" v-model="row.src">
          <el-option :label="navItem.channel" :value="navItem.cs_id" v-for="(navItem,index) in navList"></el-option>
        </el-select>
      </el-form-item>
      <!-- 添加封面 -->
      <el-form-item v-if="row.pic">
        <img :src="row.pic" style="width:100px;height:100px;">
      </el-form-item>
      <el-form-item label="添加封面" v-else>
        <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handlerSuccess">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      </el-form-item>
      <!-- 新闻内容区：详情 -->
      <el-form-item label="新闻详情" size="medium">
        <el-input type="textarea"  v-model="row.content"></el-input>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消修改</el-button>
        <el-button type="primary" @click="saveEditNew">确认更改</el-button>
      </div>
    </el-dialog>
    <addNewForm v-if="showAddNew" :isshow="showAddNew"></addNewForm>
  </div>
  <div v-else class="showHidden">对不起，您当前权限值无法查看此模块</div>
</div>
  
</template>

<script>
import addNewForm from './addNewForm'
export default {
  name:'viewlist',
  data(){
    return {
      dialogFormVisible:false,//控制dialog是否显示
      dialogImageUrl: '',
      dialogVisible: false,//控制dialog框是否可见
      showAddNew: false,
      newsList:[],//请求回来的新闻列表
      row:{},
      navList:[],//所有的导航分类
      visible: false,
      jurisdiction:''
    }
  },
  components:{addNewForm},
  methods:{
     //删除图片的回调
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    //添加图片的回调
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功的回调
    handlerSuccess(res, file, fileList){
      console.log(file)
      this.row.pic = file.url
    },
    //添加新闻按钮
    addNews(){
      this.showAddNew = true
      this.$emit('isshow',this.showAddNew)
    },
    //获取新闻数据
    async getNewsList(id){
      let result = await this.$API.newsList.getNewsList(id)
      // console.log(result)
      this.newsList = result.data.data.ret
    },
    //编辑新闻
    editNew(row){
      this.dialogFormVisible = true
      // console.log(row)
      this.row = row
    },
    //保存修改发送请求
    async saveEditNew(){
      this.dialogFormVisible = false
      let result = await this.$API.newsList.saveEditNewRequest(this.row.id,this.row)
      // console.log(result)
      if(result.data.code==200){
        this.$message.success('修改成功！')
        this.getNewsList()
      }else{
        this.$message.error('修改失败')
      }

    },
    //删除新闻
    async deleteNew(id){
      // console.log(id)
      this.visible = false
      let result = await this.$API.newsList.deleteNewRequest(id)
      // console.log(result)
      if(result.data.code==200){
        this.$message.success('删除成功')
        this.getNewsList()
      }else{
        this.$message.error('删除失败')
      }
    }
  },
  mounted(){
    this.jurisdiction = localStorage.getItem('jurisdiction')
    this.getNewsList(1)
    this.$API.navList.getNavList().then((res)=>{
      // console.log(res)
      this.navList = res.data.data.ret
    })
    console.log('newLIST组件挂载了')
    
  },
  destroyed(){
    console.log('newList组件卸载了')
  }

}
</script>

<style  scoped>
.addNews{
  margin:10px 10px ;
}
.navBtn{
  margin:10px 10px;
}
.showHidden{
  text-align:center;
  font-size:25px;
  margin-top: 100px;
  color:red;
}
</style>